<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评教管理界面</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
    <style>


        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        body {
            font-size: .875rem;
        }

        .feather {
            width: 16px;
            height: 16px;
            vertical-align: text-bottom;
        }

        /*
         * Sidebar
         */

        .sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100; /* Behind the navbar */
            padding: 48px 0 0; /* Height of navbar */
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
        }

        .sidebar-sticky {
            position: relative;
            top: 0;
            height: calc(100vh - 48px);
            padding-top: .5rem;
            overflow-x: hidden;
            overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        }

        @supports ((position: -webkit-sticky) or (position: sticky)) {
            .sidebar-sticky {
                position: -webkit-sticky;
                position: sticky;
            }
        }

        .sidebar .nav-link {
            font-weight: 500;
            color: #333;
        }

        .sidebar .nav-link .feather {
            margin-right: 4px;
            color: #999;
        }

        .sidebar .nav-link.active {
            color: #007bff;
        }

        .sidebar .nav-link:hover .feather,
        .sidebar .nav-link.active .feather {
            color: inherit;
        }

        .sidebar-heading {
            font-size: .75rem;
            text-transform: uppercase;
        }

        /*
         * Content
         */

        [role="main"] {
            padding-top: 133px; /* Space for fixed navbar */
        }

        @media (min-width: 768px) {
            [role="main"] {
                padding-top: 48px; /* Space for fixed navbar */
            }
        }

        /*
         * Navbar
         */


        .navbar-brand {
            padding-top: .75rem;
            padding-bottom: .75rem;
            font-size: 1rem;
            background-color: rgba(0, 0, 0, .25);
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
        }

        .navbar .form-control {
            padding: .75rem 1rem;
            border-width: 0;
            border-radius: 0;
        }

        .form-control-dark {
            color: #fff;
            background-color: rgba(255, 255, 255, .1);
            border-color: rgba(255, 255, 255, .1);
        }

        .form-control-dark:focus {
            border-color: transparent;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
        }

        .container-fluid{
            padding-top: 20px;
        }
        .container-fluid .nav-item{
            padding-top: 15px;
        }

        .sidebar-sticky{
            padding-top: 10px;
            justify-content: center;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="/index">
        <img th:src="@{/images/index/favicon.png}" width="30" height="30" alt="" style="margin-right: 10px">admin，欢迎您</span>
    </a>
    <input class="form-control form-control-dark w-100" id="main-input" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <button type="button" class="btn btn-warning" id="main-search">Search</button>
        </li>
    </ul>
</nav>

<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column" style="margin-left: 15px;margin-right: 15px;">
                    <li class="nav-item">

                        <button class="btn btn-info myitem" type="button" style="width: 100%;" data-toggle="collapse" data-target="#m1" aria-expanded="false" aria-controls="m1" >学生管理</button>
                        <div class="collapse multi-collapse" id="m1">
                            <a class="dropdown-item" href="#" id="addStudentPage">添加学生</a>
                            <a class="dropdown-item" href="#" id="getStudentInfoPage">学生信息</a>
                            <a class="dropdown-item" href="#" id="getStudentInfoPageClass16">16自动化</a>
                            <a class="dropdown-item" href="#" id="getStudentInfoPageClass17">17自动化</a>
                            <a class="dropdown-item" href="#" id="getStudentInfoPageClass18">18自动化</a>
                        </div>

                    </li>
                    <li class="nav-item">

                        <button class="btn btn-info myitem" type="button" style="width: 100%;" data-toggle="collapse" data-target="#m2" aria-expanded="false" aria-controls="m2" >教师管理</button>
                        <div class="collapse multi-collapse" id="m2">
                            <a class="dropdown-item" href="#" id="getTeacherInfoPage">教师信息</a>
                        </div>

                    </li>

                    <li class="nav-item">

                        <button class="btn btn-info myitem" type="button" style="width: 100%;" data-toggle="collapse" data-target="#m3" aria-expanded="false" aria-controls="m3" >课程管理</button>
                        <div class="collapse multi-collapse" id="m3">
                            <a class="dropdown-item" href="#" id="addCoursePage">添加课程</a>
                        </div>

                    </li>
                    <li class="nav-item">

                        <button class="btn btn-info myitem" type="button" style="width: 100%;" data-toggle="collapse" data-target="#m4" aria-expanded="false" aria-controls="m4" >基本信息导出</button>
                        <div class="collapse multi-collapse" id="m4">
                            <a class="dropdown-item" href="/getAllStudentInfoExcel">学生信息导出</a>
                            <a class="dropdown-item" href="/getAllTeacherInfoExcel">老师信息导出</a>
                            <!--                            <a class="dropdown-item" href="#">导出3</a>-->
                        </div>

                    </li>


                    <li class="nav-item">
                        <button class="btn btn-info myitem" type="button" style="width: 100%;" data-toggle="collapse" data-target="#m5" aria-expanded="false" aria-controls="m5" >退出登陆</button>
                        <div class="collapse multi-collapse" id="m5">
                            <a class="dropdown-item" href="/index">退出登陆</a>
                        </div>

                    </li>
                </ul>

            </div>
        </nav>

        <main role="main" id="holder" class="col-md-9 ml-sm-auto col-lg-10 px-4">
        </main>a
    </div>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">登陆成功</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span>admin,欢迎您登陆!</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary  btn-success" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="searchModalLabel">提示信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span>未搜索到指定页面</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary  btn-success" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function () {


        $("#myModal").modal('show');

        $("#addStudentPage").click(function () {
            $("#holder").load("/addStudentPage");

        });

        $("#addCoursePage").click(function () {
            $("#holder").load("/addCoursePage");

        });


        $("#getStudentInfoPage").click(function () {
            $("#holder").load("/getStudentInfoPage");

        });

        $("#getStudentInfoPageClass16").click(function () {
            $("#holder").load("/getStudentInfoPageClass16");

        });
        $("#getStudentInfoPageClass17").click(function () {
            $("#holder").load("/getStudentInfoPageClass17");

        });

        $("#getStudentInfoPageClass18").click(function () {
            $("#holder").load("/getStudentInfoPageClass18");

        });

        $("#getTeacherInfoPage").click(function () {
            $("#holder").load("/getTeacherInfoPage");

        });

        $("#main-search").click(function () {
            var $param = $("#main-input").val();

            console.log($param);

            switch ($param) {
                case "添加学生":
                    $("#holder").load("/addStudentPage");
                    break;
                case "学生信息":
                    $("#holder").load("/getStudentInfoPage");
                    break;
                case "教师信息":
                    $("#holder").load("/getTeacherInfoPage");
                    break;
                case "16"||"16自动化":
                    $("#holder").load("/getStudentInfoPageClass16");
                    break;
                case "17"||"17自动化":
                    $("#holder").load("/getStudentInfoPageClass17");
                    break;
                case "18"||"18自动化":
                    $("#holder").load("/getStudentInfoPageClass18");
                    break;

                default:
                    $("#searchModal").modal("show");
                    break;
            }

        })


    })

</script>
</body>
</html>